簡介:用鼠標拖拽彈出窗口是我們每天用到最多的功能之一。本案例以百度網(wǎng)站的登錄窗口為例,講解鼠標拖拽效果如何實現(xiàn),拖拽范圍限定以及登陸窗口自動居中。通過本案例,你將學會如何制作彈出窗口特效,了解把元素設置為可拖拽的原理。
第2章 登錄浮層靜態(tài)頁面實現(xiàn)
對鼠標拖拽的主體——登錄浮層的相關布局進行實現(xiàn)。
第3章 遮罩及登錄鏈接布局實現(xiàn)
點擊“登錄”彈出浮層,同時出現(xiàn)遮罩,本章告訴你這些如何實現(xiàn)。
第4章 遮罩全屏及自動居中浮層
用JavaScript腳本來實現(xiàn)登陸浮層的自動居中效果。
第5章 三個關鍵鼠標拖拽事件
本部分主要是對鼠標拖拽效果的實現(xiàn),詳細講解點擊、拖動、釋放三個鼠標事件。
第7章 觸發(fā)打開及關閉登錄浮層
對登錄浮層的打開及關閉動作進行講解,并對窗口大小改變時出現(xiàn)的滾動條問題進行解決。
第8章 課程總結
對鼠標拖拽特效實現(xiàn)過程的開發(fā)流程進行詳細梳理,并對每一步的關鍵技術進行總結,尤其是用到的函數(shù)部分。